<template>
  <div class="flex justify-center index  bg-[#F6F7FB] overauto"
       style="width: 100vw;height: 100vh;overflow-x: hidden;">
    <div class="content">
      <div class="relative topbg" >
        <div class="back-title" >
          <div class="relative back-box">
            <div class="absolute pt-[12PX] pl-[15PX] back-icon " @click="goBack">
              <el-icon><ArrowLeftBold size="16" /></el-icon>
            </div>
            <div class="back-title-text text-[16PX] text-center pt-[6PX]">

            </div>
          </div>
        </div>
        <div class="px-[16PX] py-[20PX] statusbox">
          <div class="text-[22PX] text-[#333] font-bold tit">{{getLanguage(props.product.language).submitOrderOk}}</div>
          <div class="text-[#999] text-[14PX] mt-[6PX] desc">{{getLanguage(props.product.language).submitOrderOkTips}}</div>
        </div>
        <div class="bg-[#fff] px-[16PX] py-[19PX] info" style="border-radius: 20PX 20PX 0 0 ;">
          <div class="text-[16PX] font-bold mb-[12PX]">{{getLanguage(props.product.language).productInfo}}</div>
          <div>
            <div class="flex items-center justify-between mb-[12PX] infos" v-for="(item,index) in orderInfo.selectedProperty" :key="index">
              <div class="flex items-center left">
                <div class="w-[96PX] h-[96PX] rounded-[14PX] mr-[12PX] imgbox">
                  <img class="w-full h-full object-cover" :src="item.product.cover" alt=""/>
                </div>
                <div class="flex h-[96PX] py-[9PX] flex-col  info-right">
                  <div class="text-[14PX] text-[#333] font-medium">{{ item.product.productName }}</div>
                  <div class="text-[12PX] mt-auto text-[#999]">{{ item.propertyValueForeign}}</div>
                  <!-- <div class="text-[14PX] mt-auto text-[#333] font-semibold">{{orderInfo.currencySymbol}} {{ item.discountedPrice }}</div> -->
                </div>
              </div>
              <div class="text-[12PX] text-[#999] right">
                x{{ orderInfo.detailList[index].number }}
              </div>
            </div>
          </div>
          <div class="my-[18PX] w-full h-[1PX] line" style="border-bottom:1px dashed #ddd"></div>
          <div>
            <div class="flex items-center justify-between py-[5PX]  items">
              <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).productTotalPrice}}</div>
              <div class="val text-[14PX] text-[#999]" >{{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.price }}</div>
            </div>
            <div class="flex items-center justify-between py-[5PX]  items" v-if="!isRemote && orderInfo.priceInfo?.shippingFee">
              <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).shippingFee}}</div>
              <div class="val text-[14PX] text-[#999]" >{{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.shippingFee || 0}}</div>
            </div>
            <div class="flex items-center justify-between py-[5PX]  items" v-if="orderInfo.priceInfo?.commission">
              <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).commission}}</div>
              <div class="val text-[14PX] text-[#999]" >{{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.commission ||0 }}</div>
            </div>
            <!-- <div class="flex items-center justify-between py-[5PX]  items" v-if="isRemote && orderInfo.priceInfo?.remotePostage">
              <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).remotePostage}}</div>
              <div class="val text-[14PX] text-[#999]" >{{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.remotePostage||0 }}</div>
            </div> -->
            <div class="flex items-center justify-between py-[5PX]  items" v-if="orderInfo.priceInfo?.lessPrice">
              <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).discount}}</div>
              <div class="val text-[14PX] text-[#FD4442]" >- {{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.lessPrice ||0 }}</div>
            </div>
            <div class="flex items-center justify-between  py-[5PX] items">
              <div class="label"></div>
              <div class="val text-[14PX] text-[#333] font-bold" >{{getLanguage(props.product.language).actualPayment}} {{orderInfo.currencySymbol}} {{ orderInfo.priceInfo?.discountPrice }}</div>
            </div>
          </div>
        </div>
        <div class="w-full h-[10PX] bg-[#f5f5f5] splitblock"></div>
        <div class="px-[16PX] bg-[#fff] pt-[10PX] py-[10PX] orderbox">
          <div class="flex justify-between items-center  py-[5PX] items">
            <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).orderNo}}：</div>
            <div class="text-[14PX] text-[#333] font-medium flex items-center val">
              {{ orderInfo.orderId }}
              <div class="text-[12PX] ml-[12PX] bg-[#f5f5f5] px-[10PX] py-[3PX] cursor-pointer rounded-[40PX] btn" v-copyText="orderInfo.orderId">{{getLanguage(props.product.language).copy}}</div>
            </div>
          </div>
          <div class="flex justify-between items-center  py-[5PX] items">
            <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).orderTime}}：</div>
            <div class="text-[14PX] text-[#333] font-medium val">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="flex justify-between items-center  py-[5PX] items">
            <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).payMethod}}：</div>
            <div class="text-[14PX] text-[#333] font-medium val">{{getLanguage(props.product.language).deliveryPay}}</div>
          </div>
          <div class="my-[18PX] w-full h-[1PX] line" style="border-bottom:1px dashed #ddd"></div>
          <div class="flex justify-between items-center  py-[5PX] items">
            <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).logisticsMethod}}：</div>
            <div class="text-[14PX] text-[#333] font-medium val">{{ orderInfo.logisticsMethodName }}</div>
          </div>
          <div class="flex justify-between items-center  py-[5PX] items">
            <div class="text-[14PX] text-[#333] label">{{getLanguage(props.product.language).sendInfoAndAddress}}：</div>
            <div class="text-[14PX] font-medium val">
              <div class="text-right text-[#333]">{{ orderInfo.customerName }} {{ orderInfo.customerPhone }}</div>
              <div class="text-[#999]">{{orderInfo.area}}{{orderInfo.areaName}}{{ orderInfo.cityName }}{{ orderInfo.detailAddress }}</div>

            </div>
          </div>
        </div>

        <!-- 底部政策 -->
        <div class="mt-[6PX] px-[16PX] py-[14PX] bg-[#fff] rounded-[12PX]"  v-if="policyList && policyList.length>0">
            <div class=" mt-[30PX] pb-[30PX]">
            <el-collapse v-model="activeNames"
                        v-if="policyList && policyList.length>0">
              <el-collapse-item :title="item.title" :name="item.id" v-for="(item,index) in policyList.filter(policy=>policy.type==5)"
                                :key="index">
                <div v-html="item.detail"></div>
              </el-collapse-item>

            </el-collapse>
            </div>
          </div>


<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.onlineService">-->
<!--          {{getLanguage(props.product.language).serverLine}}: <span class="text-[#FD4442]">{{ product.onlineService }}</span>-->
<!--        </div>-->
<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.messengerContact">-->
<!--           {{getLanguage(props.product.language).serverMessenger}}: <span class="text-[#FD4442]">{{ product.messengerContact }}</span>-->
<!--        </div>-->
<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.instagramContact">-->
<!--           {{getLanguage(props.product.language).serverInstagram}}: <span class="text-[#FD4442]">{{ product.instagramContact }}</span>-->
<!--        </div>-->
<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.whatsappContact">-->
<!--           {{getLanguage(props.product.language).serverWhatsApp}}: <span class="text-[#FD4442]">{{ product.whatsappContact }}</span>-->
<!--        </div>-->
<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.email">-->
<!--           {{getLanguage(props.product.language).serverEmail}}: <span class="text-[#FD4442]">{{ product.email }}</span>-->
<!--        </div>-->
<!--        <div class="text-center py-[4PX] text-[#333] kf" v-if="product.phone">-->
<!--           {{getLanguage(props.product.language).serverPhone}}: <span class="text-[#FD4442]">{{ product.phone }}</span>-->
<!--        </div>-->

      </div>
    </div>
  </div>


</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import {useMessage} from "@/hooks/web/useMessage";
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ArrowUp } from '@element-plus/icons-vue'
import { getLanguage } from "@/utils/langue";
import dayjs from 'dayjs'
import {spmFaceBook} from "@/utils";

const message = useMessage();
const props = defineProps({
  isPlaceAnOrder: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  areaInfo: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  skuInfo: {
    type: Array,
    required: false,
    default: () => []
  },
  hasProvince:{
    type: Boolean,
    default:true,
  },
  //原商品列表sku
  originalSku: {
    type: Array,
    required: false,
    default: () => []
  },
  provinceList: {
    type: Array,
    required: false,
    default: () => []
  },
  logisticsList: {
    type: Array,
    required: false,
    default: () => []
  },
  storeList: {
    type: Array,
    required: false,
    default: () => []
  },
  globalConfig:{
    type: Object,
    required: false,
    default: () => {}
  },
  isPickup:{
    type: Boolean,
    default: false
  },
  remoteList:{
    //偏远地区列表
    type: Array,
    default: () => []
  },
  orderInfo:{
    type: Object,
    default: () => {}
  },
  policyList: {
    type: Array,
    required: false,
    default: () => []
  },
  isRemote:{
    type: Boolean,
    default: false
  }
});

const formRef = ref<FormInstance>()

const emit = defineEmits(['confirm', 'execute','update:showSuccess']);


const goBack = () => {
  emit('update:showSuccess', false)
}
</script>
<style>
</style>
<style scoped lang="less">
.commonBorder{
  border: 1PX solid #dedede;
  border-radius: 12PX;
}
.activeBorder{
  border: 1PX solid #FF3400;
  border-radius: 12PX;
}

.topbg{
  background: url("@/assets/template/successbg.png") no-repeat right top;
  background-size:298PX 191PX;
}

.back-title{
  width: 100%;
  height: 42PX;
  // background-color: #fff;
}
.back-title-text{
  img{
    width: 7PX;
    height: 7PX;
  }
  span,p{
    color: #073064;
    font-size: 7PX;
  }
}


:deep(.el-form-item__label){
  font-size: 14PX;
  height: 30PX;
}









@import "@/common";

.index {
  .content {
    width: 640PX;
    height: 100%;

    .top-title {
      font-size: 14PX !important;
      .btn-promotion{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6PX;
        width: 40PX;
        line-height: 40PX;
        height: 18PX;
        background: #FFF5F5;
        border-radius: 3PX;
        border: 1px solid #FF0C06;
        color: #FF0C06;
        font-size: 12PX;
      }

      .bar {
        width: 4PX;
      }
    }

    .subTitle {
      font-size: 10PX !important;
    }

    .swiper {
      width: 100%;
      height: 640PX;

      .swiper-item {
        width: 100%;
        height: 640PX;
      }

      .benefit {
        width: 100%;
        height: 64PX;

        .qianggou-num {
          padding: 5PX 12PX;
        }
      }

      .cycle {
        width: 27PX;
        height: 27PX;
        border-radius: 5PX;
        background: #FD4442;
      }
    }


    .price {
      font-size: 28PX;
      margin-bottom: -5PX;
    }

    // .coupon {
    //   width: 100%;
    //   height: 45PX;
    //   padding-left: 60PX;
    // }


    .icons {
      width: 14PX;
      height: 14PX;
    }
  }

  .ft12 {
    font-size: 12PX !important;
  }

}

@media screen and (max-width: 640PX) {
  .index {
    .content {
      width: 100%;

      .swiper {
        width: 100vw;
        height: 100vw;

        .swiper-item {
          width: 100vw;
          height: 100vw;
        }
      }
    }

    .ft12 {
      .font(18);
    }

  }
  :deep(.el-form-item__label){
    font-size: 14PX;
    height: 20PX;
  }
}

:deep(.el-carousel) {
  width: 100%;
  height: 100%;

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-input-number) {
  width: 135PX;
  height: 30PX;

  .el-input-number__decrease, .el-input-number__increase {
    width: 28PX;
    height: 28PX;
    border-radius: 0PX;
  }

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
  }

  .el-icon {
    font-size: 14PX;
  }

}

:deep(.el-input) {
  height: 30PX;

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
    border-radius: 12PX;
    box-shadow: none;
  }


}

:deep(.el-textarea ) {
  height: 60PX !important;

  .el-textarea__inner {
    height: 60PX !important;
    font-size: 12PX;
    box-shadow: none;
    border:1PX solid #e5e5e5;
    border-radius: 12PX !important;
    padding: 4PX 10PX;
  }

}


:deep(.el-select) {
  height: 30PX !important;
  .el-select__wrapper{
    box-shadow: none;
    border:1PX solid #e5e5e5;
    border-radius: 12PX !important;
  }
  .el-select__selected-item, .el-input__inner, .el-select__wrapper {
    height: 30PX !important;


  }

  .el-select__placeholder {
    display: flex !important;
    align-content: center;
    align-items: center;
  }

}

:deep(.el-form-item) {
  margin-bottom: 0PX;
  margin-top: 15PX;
  flex-direction: column;
}

:deep(.el-input__wrapper){
  padding: 0PX 10PX;
  box-shadow: none;
  border:1PX solid #e5e5e5;
  border-radius: 12PX !important;
  outline: unset;
}
:deep(.el-select__wrapper){
  padding: 0 10PX;
}

</style>
